<template>

  <div class="dialog-container">
    <el-dialog
      :close-on-click-modal="true"
      :title="'添加运维表单'"
      :visible="dialogVisible"
      width="30%"
      @open="initData"
      @close="closeDialog"
    >
      <el-form
        ref="form"
        :model="dataForm"
        class="dialog-form"
        :rules="rules"
        label-width="110px"
        size="mini"
      >
        <el-row type="flex" justify="center">
          <el-col type="flex" justify="center">
            <el-form-item label="项目部" prop="projectDepartmentId" type="flex" justify="center">
              <el-select
                v-model="dataForm.projectDepartmentId"
                filterable
                remote
                clearable
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="remoteMethod"
                :loading="loading"
              >
                <el-option
                  v-for="item in projectDepartmentIds"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col>
            <el-form-item label="企业" prop="enterpriseId">
              <el-select
                v-model="dataForm.enterpriseId"
                filterable
                remote
                clearable
                reserve-keyword
                placeholder="请输入"
                :remote-method="remoteMethodEnterpriseId"
                :loading="loadingEnterpriseId"
              >
                <el-option
                  v-for="item in enterpriseIds"
                  :key="item.id"
                  :label="item.enterpriseShort"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col>
            <el-form-item label="排放口" prop="outletId">
              <el-select
                v-model="dataForm.outletId"
                filterable
                remote
                clearable
                reserve-keyword
                placeholder="请输入"
                :remote-method="remoteMethodOutletId"
                :loading="loadingOutletId"
              >
                <el-option
                  v-for="item in outletIds"
                  :key="item.id"
                  :label="item.outletName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col>
            <el-form-item label="签到时间" prop="checkInTime">
              <el-date-picker
                v-model="dataForm.checkInTime"
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col>
            <el-form-item label="设备类型" prop="equipmentId">
              <el-select
                v-model="dataForm.equipmentId"
                filterable
                remote
                clearable
                reserve-keyword
                placeholder="请输入"
                :remote-method="remoteMethodEquipmentId"
                :loading="loadingEquipmentId"
              >
                <el-option
                  v-for="item in equipmentIds"
                  :key="item.equipmentId"
                  :label="item.name"
                  :value="item.equipmentId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="saveLoading" class="sure-btn" size="mini" type="primary" @click="handleCommit()">确定</el-button>
        <el-button size="mini" class="cancel-btn" @click="closeDialog">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addMaintenance, selectThreeInfoByCd } from '@/api/maintenanceManage/index'

import { getDatefmt, getEnterprise, getProjectDepartment, getOutlet, getEquipmentIds } from '@/utils/common'

export default {
  name: 'AddMaintenanceDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogType: {
      type: String,
      default: 'detail'
    },
    obj: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      saveLoading: false,
      dataForm: {
        outletId: null,
        projectDepartmentId: null,
        enterpriseId: null,
        equipmentId: null,
        checkInTime: null
      },
      projectDepartmentIds: [],
      enterpriseIds: [],
      loadingEnterpriseId: false,
      loading: false,
      outletIds: [],
      loadingOutletId: false,
      equipmentIds: [],
      loadingEquipmentId: false,
      rules: {
        projectDepartmentId: [{ required: true, message: '请选择项目部', trigger: 'blur' }],
        enterpriseId: [{ required: true, message: '请选择企业', trigger: 'blur' }],
        outletId: [{ required: true, message: '请选择排口', trigger: 'blur' }],
        checkInTime: [{ required: true, message: '请选择签到时间', trigger: 'blur' }],
        equipmentId: [{ required: true, message: '请选择设备类型', trigger: 'blur' }]
      },
      loginInfo: ''
    }
  },
  created() {
    const info = this.$store.getters.user.info
    if (info) {
      if (typeof info === 'string') {
        this.loginInfo = JSON.parse(info)
      } else {
        this.loginInfo = info
      }
    }
  },
  methods: {
    initData() {
      this.projectDepartmentIds = []
      this.enterpriseIds = []
      this.outletIds = []
      this.equipmentIds = []
      const query = {
        projectDepartmentId: this.obj.projectDepartmentId ? this.obj.projectDepartmentId : this.loginInfo.projectDepartmentId,
        enterpriseId: this.obj.enterpriseId,
        outletId: this.obj.outletId
      }
      selectThreeInfoByCd(query).then(data1 => {
        const data = data1.data.list
        this.projectDepartmentIds = [{ 'id': data.projectDepartmentId, 'name': data.projectDepartmentName }]
        if (data.enterpriseId != null) {
          this.enterpriseIds = [{ 'id': data.enterpriseId, 'enterpriseShort': data.enterpriseName }]
        }
        if (data.outletId != null) {
          this.outletIds = [{ 'id': data.outletId, 'outletName': data.outletName }]
        }
        this.dataForm.projectDepartmentId = this.obj.projectDepartmentId
        this.dataForm.enterpriseId = this.obj.enterpriseId
        this.dataForm.outletId = this.obj.outletId
        this.dataForm.checkInTime = getDatefmt(new Date(), 'yyyy-MM-dd hh:mm:ss')
        this.remoteMethodEquipmentId('')
      })
    },
    // 搜索项目部
    remoteMethod(query) {
      if (query) {
        this.loading = true
        var temp = {}
        temp['queryField'] = query
        getProjectDepartment(temp).then(data => {
          this.projectDepartmentIds = data.data.list
          this.loading = false
        })
      } else {
        this.projectDepartmentIds = []
        this.loading = false
      }
      this.dataForm.enterpriseId = null
      this.dataForm.outletId = null
      this.dataForm.equipmentId = null
    },
    // 搜索企业
    remoteMethodEnterpriseId(query) {
      this.loadingEnterpriseId = true
      var temp = {}
      temp['queryField'] = query
      if (this.dataForm.projectDepartmentId) {
        temp['projectDepartmentId'] = this.dataForm.projectDepartmentId
        getEnterprise(temp).then(data => {
          this.enterpriseIds = data.data.list
          this.loadingEnterpriseId = false
        })
      } else {
        this.enterpriseIds = []
        this.loadingEnterpriseId = false
      }
      this.dataForm.outletId = null
      this.dataForm.equipmentId = null
    },
    // 搜索排放口
    remoteMethodOutletId(query) {
      console.log(this.dataForm.enterpriseId)
      this.loadingOutletId = true
      var temp = {}
      temp['outletName'] = query
      if (this.dataForm.projectDepartmentId && this.dataForm.enterpriseId) {
        temp['projectDepartmentId'] = this.dataForm.projectDepartmentId
        temp['enterpriseId'] = this.dataForm.enterpriseId
        getOutlet(temp).then(data => {
          this.outletIds = data.data.list
          this.loadingOutletId = false
        })
      } else {
        this.outletIds = []
        this.loadingOutletId = false
      }
      this.dataForm.equipmentId = null
    },
    remoteMethodEquipmentId(query) {
      debugger
      this.loadingEquipmentId = true
      const temp = {}
      temp['name'] = query
      if (this.dataForm.outletId) {
        temp['outletId'] = this.dataForm.outletId
        getEquipmentIds(temp).then(data => {
          this.equipmentIds = data.data.list
          this.loadingEquipmentId = false
        })
      } else {
        this.equipmentIds = []
        this.loadingEquipmentId = false
      }
    },
    handleCommit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.saveLoading = true
          addMaintenance(this.dataForm).then(() => {
            this.$message.success('添加成功')
            this.$emit('closeDialog')
            this.$emit('flushPage')
            this.saveLoading = false
          }).catch(() => {
            this.$message.error('添加失败')
            this.saveLoading = false
          })
        }
      })
    },
    closeDialog() {
      this.clearData()
      this.$emit('closeDialog')
      this.$refs['form'].clearValidate()
    },
    clearData() {
      this.dataForm = {
        outletId: null,
        projectDepartmentId: null,
        enterpriseId: null,
        equipmentId: null,
        checkInTime: null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
